import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import './deteail_content.less'
import BottomBar from '../../../bottom_bar'
class DetailContent extends Component {
  state = {
    titleList: [
      { id: 1, title: '课程详情' },
      { id: 2, title: '课程章节' },
      { id: 3, title: '相关知识' },
    ],
    active: 1
  }
  handleClick = (item) => {
    return () => {
      this.setState({
        active: item.id
      })
    }
  }
  goVideos = (id,videoId) => {
    return () => {
      this.props.history.push({
        pathname: '/videos',
        search: 'id='+id+"&videoId="+videoId
      })
    }
  }
  showOne = () => {
    const { title, description, teacherInfo, chapters } = this.props
    return (<li>
      <h3>课程标题：</h3>
      <p>{title}</p>
      <h3>课程概述：</h3>
      <p>{description}</p>
      <h3>讲师介绍：</h3>
      <p>{teacherInfo ? teacherInfo.name + '：' + teacherInfo.introduce : '暂无讲师信息'}</p>
      <h3>课程小结：</h3>
      <p>共{chapters ? chapters.length : 0}节</p>
      <h3>课程反馈：</h3>
      <p>在这里学习的过程中，如果您有什么好的想法或建议，可以发送邮件到我们的邮箱：980436918@qq.com，感谢您对我们的支持。</p>
    </li>)
  }
  showTwo = () => {
    const { id,title, chapters } = this.props
    return <li>
      <div className="detai-items">
        <h3>{title}</h3>
        <div className="item-class">
          {
            chapters && chapters.length >0 ? chapters.map(item => {
              return (
                <p key={item.id} onClick={this.goVideos(id,item.id)}>
                  <span>{item.name}</span>
                  <span style={{ color: 'skyblue' }}>点击学习</span>
                </p>
              )
            }) : '课程章节完善中，敬请关注'
          }
        </div>
      </div>
    </li>
  }
  showThree = () => {
    const { courseKnowledge } = this.props
    return <li>{courseKnowledge?courseKnowledge.content : '暂无知识点'}</li>
  }
  render() {
    const { titleList, active } = this.state
    return (
      <div className="detail-content-container">
        <nav>
          {
            titleList.map(item => {
              return <h3 key={item.title} className={active === item.id ? 'active' : ''} onClick={this.handleClick(item)}>{item.title}</h3>
            })
          }
        </nav>
        <ul>
          {
            active === 1 ? this.showOne() : active === 2 ? this.showTwo() : this.showThree()
          }
        </ul>
        <BottomBar style={{ background: '#f9f9f9', borderTop: '1px solid #e5e5e5' }} />
      </div>
    )
  }
}
export default withRouter(DetailContent)
